<template>
  <div class="couple-edit padding-top">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="组合名称：">
        <el-input v-model="depart_name" disabled></el-input>
      </el-form-item>
      <el-form-item label="经销商列表：">
        <el-transfer
          style="text-align: left; display: inline-block"
          v-model="value"
          filterable
          :titles="['待选经销商', '已选经销商']"
          :button-texts="['移除', '添加']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          :props="{key: 'store_id',label: 'depart_name'}"
          @change="handleChange"
          :data="allList"
        ></el-transfer>
        <el-form-item style="margin-top: 20px;">
          <el-button @click="back">取消</el-button>
          <el-button type="primary" @click="submit">保存</el-button>
        </el-form-item>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      depart_name: "",
      allList: [],
      value: [],
      form: {
        depart_id: "",
        stores: []
      }
    };
  },

  methods: {
    handleChange(value, direction, movedKeys) {
      this.form.stores = [];
      this.allList.map(item => {
        value.map(val => {
          if (val == item.store_id) {
            let obj = {};
            obj.store_id = item.store_id;
            obj.depart_id = item.depart_id;
            obj.depart_name = item.depart_name;
            this.form.stores.push(obj);
          }
        });
      });
    },
    // 获取所有店铺列表
    getAllList() {
      this.$http
        .post("/admin/depart/index.php?act=departManage&op=departStores", {
          depart_id: this.form.depart_id
        })
        .then(res => {
          this.allList = res.data;
          this.allList.map(value => {
            if (value.is_choose == "1") {
              this.value.push(value.store_id);
            }
          });
        });
    },
    // 返回
    back() {
      this.$router.replace({
        path: "commu"
      });
      this.$router.go(-1);
    },
    // 提交
    submit() {
      this.$http
        .post(
          "/admin/depart/index.php?act=departManage&op=addStoresToGroup",
          this.form
        )
        .then(res => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success"
            });
            this.$router.push({
              path: "admin"
            });
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error"
            });
          }
        });
    }
  },
  mounted() {
    this.depart_name = this.$store.state.couple.name;
    this.form.depart_id = this.$store.state.couple.id;
    // this.form.parent_id = this.$store.state.couple.parent;
    this.getAllList();
  }
};
</script>

<style scoped lang="scss">
.couple-edit {
  /deep/.el-transfer-panel {
    width: 240px;
    height: 400px;

    .el-transfer-panel__list.is-filterable {
      height: 288px;
    }
  }
  .el-input {
    width: 240px;
  }
}
</style>
